<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="topBox m1280 f f-j-b">
			<div>
				<div class="left">
					<div class="boxTop">
						<div @click="setlsTab(1)" :class="{ active: ind == 1 }" class="one hand f f-a-c">
							<img src="/src/assets/serch/zhun2.png" v-if="ind != 1" class="zhun2" alt="" />
							<img src="/src/assets/serch/zhun.png" v-else class="zhun2" alt="" />
							<div :class="{ activeText: ind == 1 }" class="count">{{ tabsOne }}</div>
							<img src="/src/assets/serch/setls2.png" v-if="ind != 1" class="setls2" alt="" />
							<img src="/src/assets/serch/setls.png" v-else class="setls2" alt="" />
						</div>
						<!-- 这个是左侧tabs切换 -->
						<div v-show="ind == 1" class="list">
							<div v-for="(item, index) in gigsList" :key="index">
								<div :class="{ actTop: indds == index + 1 }" @click="qieTabs(item, index)" class="listItem hand f f-a-c">
									<div class="count">{{ item.targetedProblem }}</div>
								</div>
								<div class="xians"></div>
							</div>
							<div :class="{ actTop: indds == -1 }" @click="qieTab(-1)" class="listItem hand f f-a-c">
								<div class="count">+ Add more</div>
							</div>
						</div>
						<div class="xian"></div>
						<div @click="setlsTab(2)" :class="{ active: ind == 2 }" class="one hand f f-a-c">
							<img src="/src/assets/serch/time2.png" v-if="ind != 2" class="zhun2" alt="" />
							<img src="/src/assets/serch/time.png" v-else class="zhun2" alt="" />
							<div :class="{ activeText: ind == 2 }" class="count">Targeted problem</div>
						</div>
						<div class="xian"></div>
						<div @click="setlsTab(3)" :class="{ active: ind == 3 }" class="one hand f f-a-c">
							<img src="/src/assets/serch/dui2.png" v-if="ind != 3" class="zhun2" alt="" />
							<img src="/src/assets/serch/dui.png" v-else class="zhun2" alt="" />
							<div :class="{ activeText: ind == 3 }" class="count">Publish</div>
						</div>
					</div>
					<div class="boxBot"></div>
				</div>
			</div>
			<!-- 第一个 -->
			<div v-if="ind == 1" class="right">
				<!-- Overview -->
				<div class="overview">Overview</div>
				<div class="inp">
					<div class="tit">Targeted problem <i>*</i></div>
					<input type="text" v-model="form.problem" class="inpValue" name="" id="" />
				</div>
				<div class="inp">
					<div class="tit">Description <i>*</i></div>
					<a-textarea class="textarea" :maxlength="200" v-model:value="form.description" :auto-size="{ minRows: 5, maxRows: 5 }" placeholder="Autosize height based on content lines" />
					<div class="count f f-a-c f-j-b">
						<span>As your Gig storefront, your title is the most important place to include keywords that buyers would likely use to search for a service like yours.</span>
						<span>{{ form.description.length || 0 }}/200 max</span>
					</div>
				</div>
				<!-- 性别 -->
				<div class="nameForm m-b-30 f f-a-c f-j-b">
					<div class="lefName">
						<div class="name f f-a-c">Sector <span>*</span></div>
						<!-- <input type="text" class="inps" v-model="form.userName" placeholder="" name="" id="" /> -->
						<el-select v-model="form.sector" @change="chasngeSector" placeholder="Select option" size="large" style="width: 100%">
							<el-option v-for="item in sector" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div class="lefName">
						<div class="name f f-a-c">Industry <span>*</span></div>
						<!-- <input type="text" class="inps" v-model="form.dateOfBirth" placeholder="MM/DD/YY" name="" id="" /> -->
						<el-select v-model="form.industry" placeholder="Select option" size="large" style="width: 100%">
							<el-option v-for="item in industry" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<!-- topic -->
				<div class="nameForm m-b-30 f f-a-c f-j-b">
					<div style="width: 100%" class="lefName">
						<div class="name f f-a-c">Topics<span>*</span></div>
						<el-select v-model="form.topic" size="large" multiple placeholder="" style="width: 100%">
							<el-option v-for="item in topicsList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<!-- Pricing -->
				<div class="nameForm">
					<div class="lefName">
						<div class="name f f-a-c">Pricing <span>*</span><img style="width: 14px; height: 14px; margin-left: 10px" class="hand" src="/src/assets/user/wen.png" alt="" /></div>
					</div>
				</div>
				<div class="pricing f f-a-c f-j-b">
					<div style="width: 80%" class="f f-a-c">
						<div class="lef">$</div>
						<input type="text" v-model="form.pricing" class="money" name="" id="" />
					</div>
					<div class="times">/ 30mins</div>
				</div>
				<!-- Accept customized order -->
				<div class="customized f f-a-c">
					<div @click="scceptSetls()" class="img hand">
						<img src="/src/assets/user/3.png" v-if="sccept" alt="" class="setImg" />
						<img src="/src/assets/user/4.png" v-else alt="" class="setImg" />
					</div>
					<div class="text">Accept customized order</div>
				</div>
				<!-- /btn -->
				<div class="btns f f-a-c">
					<div @click="saveOneBtn" class="btnSave hand">Save</div>
				</div>
			</div>
			<!-- 第二个 -->
			<div v-if="ind == 2" class="right">
				<div class="topName">Availability</div>
				<div class="choose">You can choose to set it by dates or by months</div>
				<div v-show="valueIndex == 1">
					<div style="padding-bottom: 40px" class="time">
						<div v-show="indd == 1" class="">
							<Times ref="Times1" :week="listWeekNum" :list="list" />
						</div>
						<div v-show="indd == 2" class="">
							<Times2 ref="Times22" :week="listWeekNum" :list="list" @inputFill2="inputFill2" />
						</div>
						<!-- 选择周 -->
						<div v-show="indd == 2" class="xianWeek"></div>
						<div v-show="indd == 2" class="week f f-a-c f-j-b">
							<div class="block">Block</div>
							<div class="rigValu hand f f-a-c">
								<!-- 下面的周=============================================================== -->
								<div v-for="(item, index) in listWeek" @click="changeWeek(item)" :key="index" class="inp f f-a-c">
									<img v-if="item.show" src="/src/assets/user/3.png" alt="" />
									<img v-else src="/src/assets/user/4.png" alt="" />
									{{ item.name }}
								</div>
							</div>
						</div>
						<div style="margin-top: 36px" class="f f-j-c">
							<Tabs
								:tabList="[
									{ name: 'Available', id: 1 },
									{ name: 'Block', id: 2 }
								]"
								:title="title"
								width="228"
								@changeTitle="changeTitle" />
						</div>
						<!-- <div class="inpTime f f-a-c f-j-b">
							<div>
								<div class="topCon">Selected dates</div>
								<div class="leftInp hand f f-a-c"><img src="/src/assets/user/Group.png" alt="" />Tue, Aug 13, 2023- Sat, Aug 17, 2023</div>
							</div>
							<div>
								<div class="topCon">Special date blocked</div>
								<div class="leftInp hand f f-a-c"><img src="/src/assets/user/Group.png" alt="" />Tue, Aug 13, 2023- Sat, Aug 17, 2023</div>
							</div>
						</div> -->
					</div>
				</div>
				<div class="timehous">
					<div class="times">Time</div>
					<div class="interval f f-a-c f-j-b">
						<div class="lefInp">
							<div class="intervalTit">Set time interval</div>
							<div class="lefName">
								<el-select v-model="timeInterval" @change="changeFn" placeholder="Select option" size="large" style="width: 100%">
									<el-option v-for="item in timelist" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
						</div>
						<div class="rigInp">
							<div class="intervalTit f f-a-c">Availability <i>(24-hour clock)</i></div>
							<div class="timMiao f f-a-c f-j-b">
								<div class="leftimMiao">
									<el-time-select v-model="staTime" size="large" style="width: 100%; height: 100%" start="08:30" :step="'00:' + timeInterval" end="18:30" placeholder="Select time" />
								</div>
								<div class="to">to</div>
								<div class="rigtimMiao">
									<el-time-select v-model="endTime" size="large" style="width: 100%; height: 100%" start="08:30" :step="'00:' + timeInterval" end="18:30" placeholder="End time" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="timehous">
					<div class="times">Meeting method</div>
					<div class="interval f f-a-c f-j-b">
						<div class="lefBox f f-a-c">
							<img src="/src/assets/8.png" class="logo" alt="" />
							<div class="zoom">
								<div class="conXoom">Zoom</div>
								<input type="text" v-model="zoom" class="inpss" placeholder="Put your link here" name="" id="" />
							</div>
						</div>
						<div class="lefBox f f-a-c">
							<img src="/src/assets/7.png" class="logo" alt="" />
							<div class="zoom">
								<div class="conXoom">Google meet</div>
								<input type="text" v-model="zoomGoogle" class="inpss" placeholder="Put your link here" name="" id="" />
							</div>
						</div>
					</div>
				</div>
				<div class="timehous">
					<div class="times">Advance Availability</div>
					<div class="setils interval f f-a-c f-j-b">
						<div class="" style="width: 48%">
							<div style="margin-top: 0" class="times">Advance notice</div>
							<el-select v-model="dayInterval" @change="changeFn" placeholder="Select option" size="large" style="width: 100%">
								<el-option v-for="item in datalist" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
						<div class="" style="width: 48%">
							<div style="margin-top: 0" class="times">Availability window</div>
							<el-select v-model="weekYuyue" @change="changeFn" placeholder="Select option" size="large" style="width: 100%">
								<el-option v-for="item in weeklist" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
				</div>
				<div class="btnSave f f-a-c f-j-f-e">
					<div @click="timeBtn" class="Save hand">Save</div>
				</div>
			</div>
			<!-- 第二个 -->
			<div v-if="ind == 3" class="right">
				<div class="xiaoImg">
					<img src="/src/assets/user/xiao.png" alt="" />
				</div>
				<!-- Congrats  -->
				<div class="congrats">Congrats</div>
				<!-- Some sentences cheer users....... -->
				<div class="users">Some sentences cheer users.......</div>
				<!-- btn -->
				<div class="btnLF f f-a-c f-j-c">
					<div @click="mangGigs" class="hand lefBtn">Manage your gigs</div>
					<div @click="done" class="hand rigBtn">Done</div>
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { timelist, datalist, weeklist } from "@/utils/setting.js";
	import { ref, onMounted, reactive } from "vue";
	import { message } from "ant-design-vue";
	import { CreateTime, MyListDraft, CreateGigsProblem, GetWorkingTime, PubGigs } from "@/api/xpert.js";
	import { TopicsList, ClassificationTree } from "@/api/commonality.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";

	import Times from "./Times.vue";
	import Times2 from "./Times2.vue";
	import Tabs from "./tab.vue";
	let statusTab = ref(1);
	let ind = ref(1); //左侧tabs
	let Times1 = ref("");
	let Times22 = ref("");
	let title = ref("Available");
	let indd = ref(1);
	let indds = ref(1);
	let weekYuyue = ref("");
	let topicsList = ref([]);
	let industry = ref([]);
	let sector = ref([]);
	let route = useRoute();
	let tabsOne = ref("+Add more");
	let oneForm = reactive({});
	// 选择每天
	let list = ref([]);
	let listWeekNum = ref([]);
	let listWeek = ref([
		{ name: "Sunday", show: false },
		{ name: "Monday", show: false },
		{ name: "Tuesday", show: false },
		{ name: "Wednesday", show: false },
		{ name: "Thursday", show: false },
		{ name: "Friday", show: false },
		{ name: "Saturday", show: false }
	]);
	let timeInterval = ref("30");
	let dayInterval = ref("");
	let zoom = ref("");
	let zoomGoogle = ref("");
	let staTime = ref("");
	let endTime = ref("");
	let valueIndex = ref(1);
	let today = ref(false);
	const gigsList = ref([]);
	let form = reactive({
		problem: "",
		description: "",
		industry: "",
		sector: "",
		pricing: "",
		topic: [],
		id: ""
	});
	let sccept = ref(false);
	const options = [
		{
			value: "Option1",
			label: "Option1"
		},
		{
			value: "Option2",
			label: "Option2"
		},
		{
			value: "Option3",
			label: "Option3"
		},
		{
			value: "Option4",
			label: "Option4"
		}
	];
	onMounted(async () => {
		// 获取工作时间
		// 获取tabs
		await getTopics();
		await classFen();
		await getMyGigs();
		await workTime();
		window.addEventListener("scroll", handleScroll);
	});
	// 点击发布
	const done = async () => {
		let n = await PubGigs();
		if (n.code == 200) {
			message.success(n.msg);
		}
	};
	//到gigs列表
	const mangGigs = () => {
		ind.value = 1;
	};
	// 点击切换第一个tabs
	const qieTabs = (item, index) => {
		indds.value = index + 1;
		tabsOne.value = item.targetedProblem;
		let obj = {
			problem: item.targetedProblem,
			description: item.description,
			industry: item.industry,
			topic: item.topicIds,
			pricing: item.pricing,
			id: item.id,
			sccept: item.hasCustomized
		};
		// 赋值
		settingOne(obj);
	};

	// 点击切换第一个tabs的添加
	const qieTab = index => {
		let obj = {
			problem: "",
			description: "",
			industry: "",
			topic: [],
			pricing: "",
			sccept: false,
			id: "",
			sectorId: ""
		};
		// 赋值
		settingOne(obj);
		indds.value = index;
		tabsOne.value = "+Add more";
	};

	// 获取我的gigs草稿
	const getMyGigs = async () => {
		let n = await MyListDraft();
		gigsList.value = n.data;
		if (!gigsList.value) {
			indds.value = -1;
		}
		if (route.query.ind) {
			indds.value = route.query.ind;
			tabsOne.value = n.data[route.query.ind - 1].targetedProblem;
			let obj = {
				problem: n.data[route.query.ind - 1].targetedProblem,
				description: n.data[route.query.ind - 1].description,
				industry: n.data[route.query.ind - 1].industry,
				topic: n.data[route.query.ind - 1].topicIds,
				pricing: n.data[route.query.ind - 1].pricing,
				id: n.data[route.query.ind - 1].id,
				sccept: n.data[route.query.ind - 1].hasCustomized,
				sectorId: n.data[route.query.ind - 1].sectorId
			};
			// 赋值
			settingOne(obj);
		} else {
			if (n.data) {
				tabsOne.value = n.data[0].targetedProblem;
				let obj = {
					problem: n.data[0].targetedProblem,
					description: n.data[0].description,
					industry: n.data[0].industry,
					sectorId: n.data[0].sectorId,
					topic: n.data[0].topicIds,
					pricing: n.data[0].pricing,
					id: n.data[0].id,
					sccept: n.data[0].hasCustomized
				};
				// 赋值
				settingOne(obj);
			}
		}
	};
	// 赋值工具函数
	const settingOne = obj => {
		chasngeSector(obj.sectorId);
		form.problem = obj.problem;
		form.description = obj.description;
		form.industry = obj.industry;
		form.sector = obj.sectorId;
		form.topic = obj.topic;
		form.pricing = obj.pricing;
		form.id = obj.id;
		sccept.value = obj.sccept;
	};
	// 筛选出二级
	// 第一个点击下一步
	const saveOneBtn = async () => {
		let obj = {
			targetedProblem: form.problem,
			description: form.description,
			industry: form.industry,
			topicIds: form.topic,
			pricing: form.pricing,
			id: form.id,
			hasCustomized: sccept.value
		};
		let n = await CreateGigsProblem(obj);
		if (n.code == 200) {
			message.success(n.msg);
			// 获取初始gigslist数据
			getMyGigs();
		}
	};
	// 获取初始工作时间
	const workTime = async () => {
		let n = await GetWorkingTime();
		if (n.data) {
			// 表示有时间
			if (n.data.dayFreeTime) {
				staTime.value = n.data.dayFreeTime[0];
			}
			// 末尾时间
			if (n.data.dayFreeTime[1]) {
				endTime.value = n.data.dayFreeTime[1];
			}
			// console.log(n.data.availabilityWindow, "777777777777777777777777");
			zoomGoogle.value = n.data.meetingLinkGoogle;
			zoom.value = n.data.meetingLinkZoom;
			timeInterval.value = String(n.data.timeInterval);
			dayInterval.value = String(n.data.lastTime);
			weekYuyue.value = String(n.data.availabilityWindow); //周
			if (n.data.busyWeek) {
				listWeekNum.value = n.data.busyWeek.map(item => (item == 7 ? 0 : item));
			}
			list.value = n.data.busyDay;
			Times1.value.selectableList = list.value;
			// 第二个时间选择
			Times22.value.selectableList = list.value;
			// 把周在下面渲染出来
			listWeekNum.value.forEach(item2 => {
				if (item2 == 0) {
					// 表示 周日
					listWeek.value[0].show = true;
				} else if (item2 == 1) {
					// 表示 周一
					listWeek.value[1].show = true;
				} else if (item2 == 2) {
					// 表示 周一
					listWeek.value[2].show = true;
				} else if (item2 == 3) {
					// 表示 周一
					listWeek.value[3].show = true;
				} else if (item2 == 4) {
					// 表示 周一
					listWeek.value[4].show = true;
				} else if (item2 == 5) {
					// 表示 周一
					listWeek.value[5].show = true;
				} else if (item2 == 6) {
					// 表示 周一
					listWeek.value[6].show = true;
				}
				// listWeek.value.forEach((item, index) => {
				// 	if (item2 == 0) {
				// 		// 表示周日
				// 	}
				// });
			});
			console.log(list.value, "66666666666666666666");
		}
	};
	// 第二个点击下一步
	const timeBtn = async () => {
		let obj = {
			timeInterval: timeInterval.value,
			busyWeek: listWeekNum.value.map(item => (item == 0 ? 7 : item)),
			busyDay: list.value,
			dayFreeTime: [staTime.value, endTime.value],
			meetingLinkZoom: zoom.value,
			meetingLinkGoogle: zoomGoogle.value,
			availabilityWindow: weekYuyue.value,
			lastTime: dayInterval.value
		};
		let n = await CreateTime(obj);
		if (n.code == 200) {
			message.success(n.msg);
			// 调用初始获取时间数据
			workTime();
		}
		console.log(obj, "111111111111111111111111111");
	};
	const setlsTab = num => {
		if (ind.value == 1 && num == 1) {
			ind.value = 1;
		} else {
			ind.value = num;
		}
	};

	// 获取分一级类树
	const classFen = async () => {
		industry.value = [];
		let n = await ClassificationTree();
		sector.value = n.data;
		sector.value.forEach(item => {
			item.value = item.id;
			if (item.children) {
				item.children.forEach(ite => {
					ite.value = ite.id;
				});
			}
		});
	};
	// 分类树二级选择
	const chasngeSector = e => {
		form.industry = "";
		let list = sector.value.filter(item => item.id == e);
		// console.log(list, "1111111111111111111111");
		if (list.length) {
			industry.value = list[0].children;
		} else {
			industry.value = [];
		}
	};
	// 获取topicsList
	const getTopics = async () => {
		let n = await TopicsList();
		topicsList.value = n.data.map(item => {
			return {
				label: item.name,
				value: item.id
			};
		});
	};
	// 选择时间
	const tabsStils = e => {
		valueIndex.value = e;
	};
	// 这个是周---------------------------------------------------
	const changeWeek = item => {
		listWeekNum.value = [];
		item.show = !item.show;
		// listWeekNum
		listWeek.value.forEach((item, index) => {
			if (item.show) {
				listWeekNum.value.push(index);
				// if (item.name == "Monday") {
				// 	listWeekNum.value.push(0);
				// } else if (item.name == "Tuesday") {
				// 	listWeekNum.value.push(1);
				// } else if (item.name == "Wednesday") {
				// 	listWeekNum.value.push(2);
				// } else if (item.name == "Thursday") {
				// 	listWeekNum.value.push(3);
				// } else if (item.name == "Friday") {
				// 	listWeekNum.value.push(4);
				// } else if (item.name == "Saturday") {
				// 	listWeekNum.value.push(5);
				// } else if (item.name == "Sunday") {
				// 	listWeekNum.value.push(6);
				// }
			}
		});
		// console.log(listWeekNum.value, "1234567890");
	};
	//
	const changeTitle = e => {
		// console.log(list.value, listWeekNum.value, "7777777777777777777777777777777777777777777");
		if (e == "Available") {
			indd.value = 1;
		} else {
			indd.value = 2;
		}
		title.value = e;
	};
	// 选择时间
	const changeFn = e => {
		console.log(timeInterval.value, "456456");
	};

	// 切换
	const scceptSetls = () => {
		sccept.value = !sccept.value;
	};
	// 切换
	const inputFill2 = arr => {
		// console.log(arr, "0000000000000000000000000000000");
		//第一个时间选择
		Times1.value.selectableList = arr;
		// 第二个时间选择
		Times22.value.selectableList = arr;
		// 第二个选择完赋值
		list.value = arr;
	};
	// 是否选择today
	const todaySel = () => {
		today.value = !today.value;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
